<template>
	<view class="content">
		<view class="top">
			<div id="search" @click="search">
				<div>
					<image class="img-search" src="../../static/search.png" mode="scaleToFill"></image>
					<span class="searchtext"></span>
				</div>
			</div>
		</view>

		<view class="banner">
			<!-- <view> -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<image :src="item.bannerImg" mode="scaleToFill" class="bannerImg"> </image>
					</swiper-item>
				</swiper>
				<!-- <text class="banner_name" v-for="(item,index) in bannerList" :key="index">{{item.name}}</text> -->
			</view>

			<!-- </view> -->
		</view>

		<view class="main">
			<view class="type">
				<view class="nav">
					<view class="nav_item" v-for="(item,index) in navList" :key="index" @click="navClick">
						<image :src="item.img" class="typeImg"></image>
						<text class="typeText">{{item.title}}</text>
					</view>
				</view>
			</view>

			<view class="option">
				<div class="left">
					<image src="../../static/images/index-1.png" mode=""></image>
				</div>
				<div class="right">
					<image src="../../static/images/index-2.png" mode=""></image>
					<image src="../../static/images/index-3.png" mode=""></image>
				</div>
			</view>
			<div class="title-2">
				<text>为您推荐</text>
			</div>
			
			<view class="options">
				<div class="options_card" v-for="(item,index) in options" :key="index" @click="detail">
					<image :src="item.img" mode="scaleToFill" class="optionsImg"> </image>
					<div class="name">{{item.name}}</div>
					<div class="price">￥{{item.price}}</div>
				</div>
			</view>
		</view>
		<view class="end">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true, //是否显示面板显示点
				autoplay: true, //是否自动轮播
				interval: 3000, //切换的间隔时间
				duration: 1000, //滑动动画时长
				// title: '生如夏花之绚烂，死如秋叶之静美',
				bannerList: [],

				navList: [{
						img: "/static/推荐.png",
						title: "推荐",
						path: "/sort/shop_sort/shop_sort" //跳转页面地址
					},
					{
						img: "/static/医药.png",
						title: "医药",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/数码.png",
						title: "数码",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/手机.png",
						title: "手机",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/美妆.png",
						title: "美妆",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/女装.png",
						title: "女装",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/男装.png",
						title: "男装",
						path: "/sort/shop_sort/shop_sort"
					},
					{
						img: "/static/食品安全.png",
						title: "食品",
						path: "/sort/shop_sort/shop_sort"
					}
				],

				options: [{
						img: "/static/images/images/image/book-1.png",
						name: "哈利波特全套",
						price: 189
					},
					{
						img: "/static/images/images/image/book-2.png",
						name: "大模型推荐系统",
						price: 65.45
					},
					{
						img: "/static/images/images/image/book-3.png",
						name: "杀死一只知更鸟",
						price: 34.80
					},
					{
						img: "/static/images/images/image/book-4.png",
						name: "科幻绘本系列",
						price: 213
					},
					{
						img: "/static/images/images/image/book-5.png",
						name: "狼图腾",
						price: 25
					},
					{
						img: "/static/images/images/image/book-6.png",
						name: "爱的教育",
						price: 13
					},
					{
						img: "/static/images/images/image/cloth-1.png",
						name: "白色卫衣男连帽",
						price: 74.90
					},
					{
						img: "/static/images/images/image/food.png",
						name: "休闲饼干",
						price: 23.90
					},
					{
						img: "/static/images/images/image/shoe.png",
						name: "休闲布鞋",
						price: 109
					},
					{
						img: "/static/images/images/image/watch-1.png",
						name: "冠琴手表",
						price: 268
					},
				],


			}
		},
		methods: {
			banners() {
				uni.request({

					url: 'http://newcoffee.wwp666.cn:10006/banner?appkey=U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=',
					// url: 'http://localhost:4000/api/banner/bannerImg',
					success: (res) => {
						console.log(res)
						this.bannerList = res.data.result
						console.log(this.bannerList)
						// console.log(url)
					},
					fail: (error) => {
						console.log(error)
						console.log(url)
					}
				})
			},
			navClick() {
				uni.switchTab({
					url: "../../pages/sort/sort"
				})
			},
			detail() {
				uni.navigateTo({
					url: "../../detail/detail/detail"
				})
			},
			search() {
				uni.navigateTo({
					url: "../../search/search",
				})
			}
		},

		onLoad() {
			this.banners();

		}

	}
</script>

<style lang="scss" scoped>
	.content {
		/* width:100vh; */
		// height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;

	}

	.top {
		width: 100%;
		height: 40px;
		padding: 10px 0px;
		/* height:200px; */
		/* overflow:hidden; */
		background-color: white;
		position: fixed;
		display: flex;
		justify-content: center;
		z-index: 100;
	}

	#search {
		width: 90%;
		border: 1px solid #27ba9b;
		height: 40px;
		border-radius: 10px;
		/* line-height:140%; */
		overflow: hidden;
		box-sizing: border-box;
		background-color: white;
		position: relative;
	}

	.searchtext {
		font-size: 15px;
		position: absolute;
		top: 10px;
		left: 40px;

	}

	.img-search {
		display: inline-block;
		width: 30px;
		height: 30px;
		/* border:1px solid red; */
		border-radius: 10px;
		vertical-align: middle;
		position: absolute;
		top: 5px;
		left: 5px;
	}

	.banner {
		width: 100%;
		margin-top: 60px;
		height: 200px;
		// background-color: yellow;
	}

	.banner_name {
		display: block;
		white-space: normal;
	}

	.bannerImg {
		width: 100%;
		height: 100%;
	}

	.uni-margin-wrap {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.title {
		font-size: 36rpx;
		color: #0099ff;
		font-family: "华文行楷";
		text-align: center;
	}

	.main {
		width: 100%;
		padding: 10px 1px;
	}

	.type {
		display: flex;
		justify-content: center;
	}

	.nav {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: white;
	}

	.nav_item {
		width: 35px;
		padding: 5px 5px;
		// background-color:pink;
		text-align: center;
	}

	.typeImg {
		display: inline-block;
		width: 35px;
		height: 35px;
		background-size: cover;
	}

	.typeText {
		font-size: 13px;
		font-family: "宋体";
	}

	.option {
		// width:100%;
		height: 220px;
		// background-color:blue;
		display: flex;
		margin-top: 20px;
	}

	.option .left {
		height: 100%;

	}

	.option .left image {
		border-radius: 10px;
		width: 170px;
		height: 205px;
		margin: 5px;
		/* 处理图片变模糊(使用了某些图像算法)*/
		image-rendering: -webkit-optimize-contrast;
	}

	.option .right {
		height: 100%;
	}

	.option .right image {
		display: block;
		border-radius: 10px;
		width: 180px;
		height: 100px;
		margin: 5px;
		/* 处理图片变模糊(使用了某些图像算法)*/
		image-rendering: -webkit-optimize-contrast;
	}
	.title-2{
		background-image:url(../../static/images/title2.png);
		background-size:contain;
		// background-color:red;
		width:100%;
		height:50px;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.title-2 text{
		font-size:18px;
		font-weight:600;
		
	}
	.options {
		display: flex;
		flex-wrap: wrap;
		// justify-content:space-around;
		// background-color:yellow;
		margin-top: 15px;
		// margin-bottom:45px;
	}

	.optionsImg {
		width: 150px;
		height: 200px;
		background-size: cover;
		// margin:10px;
		border-radius: 10px;

	}

	.options .options_card {
		height: 270px;
		// background-color:red;
		margin: 10px 5px;
		padding: 10px;
		border: 1px solid #27ba9b;
		border-radius: 10px;
		background-color: white;

	}

	.options .options_card .name {
		font-size: 18px;
		font-family: "宋体";
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
		background-color: white;
	}

	.options .options_card .price {
		font-size: 18px;
		font-family: "宋体";
		font-weight: 600;
		// text-align:center;
		padding: 0px 10px;
		color: red;
		margin: 10px;
		background-color: white;
	}

	// 横向导航栏设置
	.navscroll {
		white-space: nowrap; // 设置内容不换行
		height: 100rpx; // 设置滑动栏的高度
		background: #F7F8FA; // 设置滑动栏的颜色

		// 通过渗透来消除状态栏下方的下划线
		::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			font-size: 40rpx; // 设置字体大小
			display: inline-block; // 设置为行内块
			line-height: 100rpx; // 设置行高
			padding: 0 30rpx; // 设置外边距
			color: #333; // 设置颜色		
		}

	}
</style>